<template>
  <div style="">
    <div style="width: 1200px;margin-left: 130px;">
    <el-header  style="width: 1200px;background-color: rgba(100, 100, 100, 0.38)"><h1>销量排行榜</h1></el-header>
    <el-main style="height: 800px;width: 1200px;border: 2px solid black">
    <template>
        <el-row :gutter="20"  style="clear: none!important;">
          <el-col style="margin: 10px 0;text-align: center" :span="6" v-for="g in topNumsArr" v-infinite-scroll="load" >
            <el-card style="height: 250px">
              <a :href="'/deil?id='+g.id">
                <img style="height: 100px" class="p_img" :src="g.url" width="100%" alt="">
              </a>
              <div>
                <p style="font-size: 15px;height: 40px;margin-top: 0">
                  <a style="text-decoration: none;color: #3f3f3f;font-size:smaller" :href="'/deil?id='+g.id">
                    {{g.name}}
                  </a>
                </p>
                <p style="font-size: 12px;color: #666;margin-top: 10px;line-height: 20px">
                  ￥{{ g.money }} <br>库存:{{g.num}}
                  <span style="float: right">销量:{{ g.nums }}件</span>
                </p>
              </div>
            </el-card>
          </el-col>
        </el-row>
    </template>
    </el-main>
    </div>

    <div  style="width: 1200px;margin-left: 130px;">
    <el-header  style="width: 1200px;background-color: rgba(100, 100, 100, 0.38)"><h1>评论排行榜</h1></el-header>
      <el-main style="height: 800px;width: 1200px;border: 2px solid black">
        <template>
          <el-row :gutter="20"  style="clear: none!important;">
            <el-col style="margin: 10px 0" :span="6" v-for="g in topCommentArr" v-infinite-scroll="load" >
              <el-card style="height: 250px">
                <a :href="'/deil?id='+g.id">
                  <img style="height: 100px" class="p_img" :src="g.url" width="100%" alt="">
                </a>
                <div>
                  <p style="font-size: 15px;height: 40px;margin-top: 0">
                    <a style="text-decoration: none;color: #3f3f3f;font-size:smaller" :href="'/deil?id='+g.id">
                      {{g.name}}
                    </a>
                  </p>
                  <p style="font-size: 12px;color: #666;margin-top: 10px;line-height: 20px">
                    ￥{{ g.money }}评论量：{{g.comments}} <br>库存:{{g.num}}
                    <span style="float: right">销量:{{ g.nums }}件</span>
                  </p>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </template>
      </el-main>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0 ,counts: 0,
      topNumsArr: [{name: "asd11111111111111"}, {title: "asd"}, {title: "asd"}, {title: "asd"}, {title: "asd"}, {title: "asd"}, {title: "asd"}, {title: "asd"},],
      topCommentArr: [{name: "asd11111111111"}, {title: "asd"}, {title: "asd"}, {title: "asd"}, {title: "asd"}, {title: "asd"}, {title: "asd"}, {title: "asd"},],
      goodArrs:[]
    }
  },
  methods: {
    load() {
      this.count += 1
      this.counts += 1
    },
    selectGoodsListByNumsAll() {//查询销量排序商品
      let url = 'http://localhost:8080/indexs/selectGoodsListByNumsAll';
      this.axios.get(url).then((response) => {
        console.log('response = ' + response);
        let responseBody = response.data;
        this.topNumsArr = responseBody.data;
      });
    },
    selectGoodsListByCommentsAll() {//查询销量排序商品
      let url = 'http://localhost:8080/indexs/selectGoodsListByCommentsAll';
      this.axios.get(url).then((response) => {
        console.log('response = ' + response);
        let responseBody = response.data;
        this.topCommentArr = responseBody.data;
      });
    },

  },
  mounted(){
    this.selectGoodsListByNumsAll();//查询销量排序商品
    this.selectGoodsListByCommentsAll();//查询评论排序商品
  }
}
</script>

<style scoped>

</style>